<template>
  <div class="top-6" v-loading="loading">
    <div class="top-6-left">
      <div class="top-6-left-title">实物写真</div>
      <div class="top-6-left-previews">
        <el-image
          v-if="imgPath"
          style="width: 100%; height: 100%"
          :src="imgPath"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[imgPath]"
          show-progress
          :initial-index="4"
          fit="contain"
        />
        <video
          controls
          v-if="videoPath"
          loop
          autoplay
          muted
          webkit-playsinline
          preload="auto"
          style="width: 100%; height: 100%; object-fit: contain"
          :src="videoPath"
        >
          您的浏览器不支持视频播放
        </video>
        <el-empty v-if="otherPath" description="其他类型文件，无法预览！" />
      </div>
    </div>
    <div class="top-6-right">
      <div class="top-6-right-1">
        <!-- 1 样式等标题 -->
        <div class="top-6-right-1-title-167">式样</div>
        <div class="top-6-right-1-title-167">托盘</div>
        <div class="top-6-right-1-title-167">箱标签</div>
        <div class="top-6-right-1-title-167">托标签</div>
        <div class="top-6-right-1-title-166">打包带</div>
        <div class="top-6-right-1-title-166">缠绕膜</div>
        <!-- 2 样式内容 -->
        <div class="top-6-right-1-value-167">
          <div style="display: block"> 
            <span style="display: block;" v-for="item in buildStrList( props.stockUpInfo?.packType)" :key="item">{{ item }}</span>
          </div>
          <!-- {{ props.stockUpInfo?.packType }} -->
        </div>
        <div class="top-6-right-1-value-167">
          <div style="display: block"> 
            <span style="display: block;" v-for="item in buildStrList( props.stockUpInfo?.tray)" :key="item">{{ item }}</span>
          </div>
          <!-- {{ props.stockUpInfo?.tray }} -->
        </div>
        <div class="top-6-right-1-value-167">
          <div style="display: block"> 
            <span style="display: block;" v-for="item in buildStrList( props.stockUpInfo?.boxDesc)" :key="item">{{ item }}</span>
          </div>
          <!-- {{ props.stockUpInfo?.boxDesc }} -->
        </div>
        <div class="top-6-right-1-value-167">
          <div style="display: block"> 
            <span style="display: block;" v-for="item in buildStrList( props.stockUpInfo?.trayDesc)" :key="item">{{ item }}</span>
          </div>
          <!-- {{ props.stockUpInfo?.trayDesc }} -->
        </div>
        <div class="top-6-right-1-value-166">
          <div style="display: block"> 
            <span style="display: block;" v-for="item in buildStrList( props.stockUpInfo?.packStrap)" :key="item">{{ item }}</span>
          </div>
          <!-- {{ props.stockUpInfo?.packStrap }} -->
        </div>
        <div class="top-6-right-1-value-166">
          <div style="display: block"> 
            <span style="display: block;" v-for="item in buildStrList( props.stockUpInfo?.wrappingFilm)" :key="item">{{ item }}</span>
          </div>
          <!-- {{ props.stockUpInfo?.wrappingFilm }} -->
        </div>
      </div>
      <!---->
      <div class="top-6-right-2">对应品番</div>
      <div class="top-6-right-3">
        <div class="top-6-right-3-info">
          <div class="top-6-right-3-info-title">
            <div class="top-6-right-3-info-title-wide">品番</div>
            <div class="top-6-right-3-info-title-narrow">箱收容数</div>
            <div class="top-6-right-3-info-title-narrow">箱数/托</div>
            <div class="top-6-right-3-info-title-narrow">托收容数</div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(0, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(0, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(0, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(0, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(0, "trayQty") }}
            </div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(1, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(1, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(1, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(1, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(1, "trayQty") }}
            </div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(2, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(2, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(2, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(2, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(2, "trayQty") }}
            </div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(3, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(3, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(3, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(3, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(3, "trayQty") }}
            </div>
          </div>
        </div>
        <div class="top-6-right-3-info">
          <div class="top-6-right-3-info-title">
            <div class="top-6-right-3-info-title-wide">品番</div>
            <div class="top-6-right-3-info-title-narrow">箱收容数</div>
            <div class="top-6-right-3-info-title-narrow">箱数/托</div>
            <div class="top-6-right-3-info-title-narrow">托收容数</div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(4, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(4, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(4, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(4, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(4, "trayQty") }}
            </div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(5, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(5, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(5, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(5, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(5, "trayQty") }}
            </div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(6, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(6, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(6, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(6, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(6, "trayQty") }}
            </div>
          </div>
          <div class="top-6-right-3-info-value">
            <div class="top-6-right-3-info-value-wide">
              <span class="top-6-right-3-info-value-wide-before">{{ getMaterialBefore(getVlue(7, "name")) }}</span>
              <span class="top-6-right-3-info-value-wide-end">{{ getMaterialEnd(getVlue(7, "name")) }}</span>
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(7, "boxQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(7, "boxTrayQty") }}
            </div>
            <div class="top-6-right-3-info-value-narrow">
              {{ getVlue(7, "trayQty") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Post">
const emit = defineEmits();
const { proxy } = getCurrentInstance();
const props = defineProps({
  // 数据
  stockUpInfo: {
    type: Object,
    default: undefined,
  },
});

const materialList = ref([]);
const loading = ref(false);
const videoPath = ref();
const imgPath = ref();
const otherPath = ref();
const fileTypeMap = {
  // 图片类型
  image: ["jpg", "jpeg", "png", "gif", "bmp", "webp"],
  // 视频类型
  video: ["mp4", "webm", "ogg", "mov", "avi", "flv"],
};

const buildStrList = (info)=>{
  if(!info){
    return [];
  }
  let arr = [];
  if(info.includes("现品票")){
    let tempArr = info.split("现品票");
    for(let i = 0 ; i < tempArr.length;i++){
      let str = tempArr[0];
      if(str){
        let subArr = buildStrList(str);
        arr = [...new Set([...arr, ...subArr])];
      }
      if(i+1<tempArr.length){
        arr.push("现品票")
      }
    }
  }else if(info.includes("托标签")){
    let tempArr = info.split("托标签");
    for(let i = 0 ; i < tempArr.length;i++){
      let str = tempArr[0];
      if(str){
        let subArr = buildStrList(str);
        arr = [...new Set([...arr, ...subArr])];
      }
      if(i+1<tempArr.length){
        arr.push("托标签")
      }
    }
  }else if(info.includes("如图所示")){
    let tempArr = info.split("如图所示");
    for(let i = 0 ; i < tempArr.length;i++){
      let str = tempArr[0];
      if(str){
        let subArr = buildStrList(str);
        arr = [...new Set([...arr, ...subArr])];
      }
      if(i+1<tempArr.length){
        arr.push("如图所示")
      }
    }
  }else if(info.includes("如视频所示")){
    let tempArr = info.split("如视频所示");
    for(let i = 0 ; i < tempArr.length;i++){
      let str = tempArr[0];
      if(str){
        let subArr = buildStrList(str);
        arr = [...new Set([...arr, ...subArr])];
      }
      if(i+1<tempArr.length){
        arr.push("如视频所示")
      }
    }
  }else if (info.includes("（")&&info.includes("）")){
    let beginIndex = info.indexOf("（");
    let endIndex = info.indexOf("）");
    arr.push(info.substring(0,beginIndex))
    arr.push(info.substring(beginIndex,endIndex+1))
    arr.push(info.substring(endIndex+1))
  }else{
    arr.push(info)
  }
  return arr;
}

async function getList(customerId) {
  loading.value = false;
  try {
    let result = await window.base.listMaterial({ customerId });
    materialList.value = result ? result : [];
  } catch (e) {
  } finally {
    loading.value = false;
  }
}

const getMaterialBefore=(code)=>{
  if(code.includes("-")){
    return code.split("-")[0]+"-"
  }else{
    return code.slice(0,-6);
  }
}

const getMaterialEnd=(code)=>{
  if(code.includes("-")){
    return code.split("-")[1]
  }else{
    return code.slice(-5);
  }
}

const getVlue = (index, field) => {
  let length = materialList.value.length;
  if (length <= index) {
    return "";
  }
  let obj = materialList.value[index];
  return obj ? obj[field] : "";
};

const getFileType = (fileName) => {
  // 获取文件后缀（转小写）
  const ext = fileName.split(".").pop()?.toLowerCase() || "";
  // 判断是否为图片
  if (fileTypeMap.image.includes(ext)) return "image";
  // 判断是否为视频
  if (fileTypeMap.video.includes(ext)) return "video";
  // 其他类型
  return "other";
};

watch(
  () => props.stockUpInfo.customerId,
  (newVal, oldVal) => {
    if (newVal) {
      getList(newVal);
    }
  },
  {
    immediate: true, // 可选：组件初始化时立即执行一次
    deep: false, // 无需深度监听，因直接监听具体字段
  }
);
watch(
  () => props.stockUpInfo.path,
  (newVal, oldVal) => {
    if (newVal) {
      let type = getFileType(newVal);
      if (type == "image") {
        videoPath.value = undefined;
        imgPath.value = `file://${newVal}`;
        otherPath.value = undefined;
      } else if (type == "video") {
        videoPath.value = `file://${newVal}`;
        imgPath.value = undefined;
        otherPath.value = undefined;
      } else {
        videoPath.value = undefined;
        imgPath.value = undefined;
        otherPath.value = "undefined";
      }
    }
  },
  {
    immediate: true, // 可选：组件初始化时立即执行一次
    deep: false, // 无需深度监听，因直接监听具体字段
  }
);
</script>
<style lang='scss' scoped>
.top-6 {
  height: 49%;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  .top-6-left {
    width: 35%;
    height: 100%;
    float: left;
    .top-6-left-title {
      text-align: center;
      height: 10%;
      font-size: 3.1vh;
      border: 1px solid black;
    }
    .top-6-left-previews {
      height: 90%;
      border: 1px solid black;
      // display: flex;
      position: relative; /* 确保子元素定位正确 */
      overflow: hidden; /* 隐藏超出容器的部分 */
    }
  }
  .top-6-right {
    width: 65%;
    height: 100%;
    float: left;
    .top-6-right-1 {
      height: 30%;
      .top-6-right-1-title-167 {
        text-align: center;
        float: left;
        height: 33.33%;
        width: 16.7%;
        font-size: 3.1vh;
        border: 1px solid black;
      }
      .top-6-right-1-title-166 {
        text-align: center;
        float: left;
        height: 33.33%;
        width: 16.6%;
        font-size: 3.1vh;
        border: 1px solid black;
      }
      .top-6-right-1-value-167 {
        text-align: center;
        float: left;
        height: 66.67%;
        width: 16.7%;
        font-size: 2.5vh;
        border: 1px solid black;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */

        /* 自动换行（默认开启，可显式声明） */
        word-wrap: break-word; /* 强制换行（支持长单词/URL） */
        white-space: normal; /* 允许文本换行（默认值，可省略） */
      }
      .top-6-right-1-value-166 {
        text-align: center;
        float: left;
        height: 66.67%;
        width: 16.6%;
        font-size: 2.5vh;
        border: 1px solid black;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */

        /* 自动换行（默认开启，可显式声明） */
        word-wrap: break-word; /* 强制换行（支持长单词/URL） */
        white-space: normal; /* 允许文本换行（默认值，可省略） */
      }
    }
    .top-6-right-2 {
      text-align: center;
      height: 10%;
      font-size: 3.1vh;
      border: 1px solid black;
    }
    .top-6-right-3 {
      height: 60%;
      .top-6-right-3-info {
        height: 100%;
        width: 50%;
        float: left;
        .top-6-right-3-info-title {
          height: 30%;
          .top-6-right-3-info-title-wide {
            text-align: center;
            width: 55%;
            height: 100%;
            font-size: 2.5vh;
            float: left;
            border: 1px solid black;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */

            /* 自动换行（默认开启，可显式声明） */
            word-wrap: break-word; /* 强制换行（支持长单词/URL） */
            white-space: normal; /* 允许文本换行（默认值，可省略） */
          }
          .top-6-right-3-info-title-narrow {
            text-align: center;
            width: 15%;
            float: left;
            height: 100%;
            border: 1px solid black;
            font-size: 2.5vh;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */

            /* 自动换行（默认开启，可显式声明） */
            word-wrap: break-word; /* 强制换行（支持长单词/URL） */
            white-space: normal; /* 允许文本换行（默认值，可省略） */
          }
        }
        .top-6-right-3-info-value {
          height: 17.5%;
          .top-6-right-3-info-value-wide {
            text-align: center;
            width: 55%;
            height: 100%;
            font-size: 2.5vh;
            float: left;
            border: 1px solid black;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */

            /* 自动换行（默认开启，可显式声明） */
            word-wrap: break-word; /* 强制换行（支持长单词/URL） */
            white-space: normal; /* 允许文本换行（默认值，可省略） */
            .top-6-right-3-info-value-wide-before{
              font-size: 2vh;
            }
            .top-6-right-3-info-value-wide-end{
              font-weight: bolder;
              font-size: 3vh;

            }
          }
          .top-6-right-3-info-value-narrow {
            text-align: center;
            width: 15%;
            float: left;
            height: 100%;
            border: 1px solid black;
            font-size: 2.5vh;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */

            /* 自动换行（默认开启，可显式声明） */
            word-wrap: break-word; /* 强制换行（支持长单词/URL） */
            white-space: normal; /* 允许文本换行（默认值，可省略） */
          }
        }
      }
    }
  }
}
</style>
